<html>
<head>
<title>ReadyMap WebGL</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="../js/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../build/readymap-debug-0.0.1.js"></script>

<!--JQuery UI-->
<script type="text/javascript" src="../js/jquery/jquery-ui-1.8.2.custom.min.js"></script>

<link href="../css/ui-lightness/jquery.ui.all.css" rel="stylesheet" type="text/css"></link>
<link href="demo.css" rel="Stylesheet" type="text/css"></link>
<link href="../css/readymap.css" rel="Stylesheet" type="text/css"></link>

<style type="text/css">
   
    #layer-control
    {
    	position: absolute;
    	right: 10px;
    	top: 300px;
    	z-index: 1000;
    }
       
    
    #example-help    
    {      
      position:absolute;
      top: 100px;
      right: 4px;
      z-index:1000;
      margin-top: 4px;
      padding: 4px;
      width: 300px;
      background-color: #666;
      border: 1px solid #999;
     font-family :Helvetica,Verdana,Arial,sans-serif;
    }
    
    #Help
    {
    	z-index: 1000 !important;    	
    	left: 100px;
    	top: 100px;
    }
    
    
</style>

<script type="text/javascript">

    var layer;
    var olMap = null;    

    function initialize(globe) {

        //Destroy the existing map
        if (olMap !== null) {
            olMap.destroy();
        }
            
        // create the OpenLayers map model:
        layer = new OpenLayers.Layer.WMS(
          "OpenLayers Layer",
          "http://readymap.org/readymap/tiles",
          { layers: "22", format: "image/jpeg" },
          { isBaseLayer: true, tileSize: new OpenLayers.Size(256, 256) }
        );

          $("#layer_name").html(layer.name);

        var controlDiv = null;
        //Add OpenLayers controls, they work in 3D as well!
        olMap = new OpenLayers.Map("map", { controls: [] });
        olMap.addControl(new OpenLayers.Control.Navigation());
        olMap.addControl(new OpenLayers.Control.PanZoom());

        //Here is where we setup the map.  If you want a 3D map you need to call setupGlobe() on your OpenLayers map immediately after creation.
        //When you are finished adding layers to your map, call finishGlobe() on your map.  When ReadyMap supports adding layers dynamically
        //finishGlobe won't be necessary
        olMap.setupGlobe();
        olMap.addLayer(layer);
		olMap.finishGlobe();
		
		
		
		var markers = new OpenLayers.Layer.Markers( "Markers" );
        olMap.addLayer(markers);

        var size = new OpenLayers.Size(21,25);
        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
        var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
        markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));

        var halfIcon = icon.clone();
        markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,45),halfIcon));

        marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon.clone());        
        markers.addMarker(marker); 			

        //Zoom to the max extent
        olMap.zoomToMaxExtent();

        //Setup a slider to control the layer opacity
        $("#opacity_slider").slider({
            range: "min",
            value: 100,
            min: 1,
            max: 100,
            slide: function (event, ui) {
                layer.setOpacity(ui.value / 100);
            }
        });

        //Setup a checkbox to toggle the layer on and off
        $("#enabled_checkbox").click(function () {
            var enabled = $(this).attr("checked");
            layer.setVisibility(enabled);
        });

        $("#enabled_checkbox").attr("checked", "checked");
    }

    function handleCheckChange(cb) {
        olMap.set3D(cb.checked);
    }

    $(document).ready(function () {

        // create a view tied to a page element:
        var size = ReadyMap.getWindowSize();
        var headerHeight = jQuery('#header').height();
        size.h -= headerHeight;
        $("#map").width(size.w);
        $("#map").height(size.h);



        initialize();

        $("#toggleGlobeButton").click(function () {
            if (olMap.is3D) {
                olMap.show2D();
            }
            else {
                olMap.show3D();
            }            
        });
    });




</script>
</head>

<body>

  <div id="header">
    <a href="http://pelicanmapping.com" border="0"><img id="logo" align="right" height="50" src="http://pelicanmapping.com/wp-content/uploads/2011/02/pelican-logo-262x93-light.png" /></a>
    <p>
        ReadyMap / WebGL :: 
        <a href="index.html">demos</a> ::
        <a href="http://godzi.org">wiki</a> :: 
        <a href="http://github.com/gwaldron/godzi-webgl">github</a> ::
        <a href="http://twitter.com/#!/pelicanmapping">twitter</a>
    </p>
  </div>

  <div id="map" style="position: relative">    
  </div>  

  <div id="layer-control" class="ui-widget ui-widget-content">  
        
        <div class="ui-widget-header">Layers</div>
        <div class="'ui-widget-content ui-state-default">
            <input id="enabled_checkbox" type="checkbox" checked="checked" />        
            <span id="layer_name">Layer</span>
            <div id="opacity_slider" style="width: 200px; height: 5px;"></div>
        </div>
  </div>

  <div id="example-help">
    This example demonstrates the new OpenLayers integration.
    It allows you to use ReadyMap to view your existing OpenLayers webpages as a 3D globe with just a few lines of code!<br />
    <input type="checkbox" checked="checked" onchange="handleCheckChange(this)" /> Show globe
  </div>

  <div id="Help">
    <ul>
      <li>drag to pan</li>
      <li>wheel to zoom</li>
      <li>shift-drag to rotate</li>
      <li><a href="#" onclick="olMap.zoomToMaxExtent();">reset view</a></li>            
    </ul>
  </div>


</body>

</html>
